<template>
  <div class="mr-5" id="guide-theme"> 
    <span class="mr-2 text-black dark:text-yellow-400">黑暗模式</span>
    <el-switch v-model="themeStore.theme" @change="toggleDark()" />
  </div>
</template>

<script setup>
import { useToggle, useDark } from '@vueuse/core'
import { useThemeStore } from '@/stores/modules/theme'
const themeStore = useThemeStore()
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<style lang="scss" scoped></style>
